<template>
  <div class="billManage">
    <el-container>
      <el-aside style="width: 200px">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText" />
        <el-tree
          class="filter-tree"
          :data="billCategoryData"
          node-key="shopsId"
          default-expand-all
          style="font-size: 15px; margin-top: 20px; color: #5b714f"
          :props="defaultProps"
          :filter-node-method="filterNode"
          ref="tree"
          highlight-current
          @nodeClick="getTree"
        >
        </el-tree>
      </el-aside>
      <el-main>
        <el-form :inline="true" :model="queryFrom" class="demo-form-inline">
          <el-form-item label="菜品名称">
            <el-input v-model="queryFrom.foodName" placeholder="菜品名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="listByPage">查询</el-button>
            <el-button type="info" @click="refreshList">重置</el-button>
            <el-button type="text" @click="addDataWindow">新增</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
          <el-table-column type="index" label="编号" width="80" />
          <el-table-column label="菜品名称" style="align-content: center">
            <template #default="scope">
              <el-button size="small" type="success">{{ scope.row.foodName }}</el-button>
              <el-button type="text">({{ scope.row.categoryType }})</el-button>
            </template>
          </el-table-column>
          <el-table-column label="价格" style="align-content: center">
            <template #default="scope">
              <el-button size="medium" type="danger">￥{{ scope.row.price }}元</el-button>
            </template>
          </el-table-column>
          <el-table-column label="图片" width="180" style="align-content: center">
            <template #default="scope">
              <el-image style="width: 100px; height: 100px" size="medium" type="danger" :src="scope.row.imageUrl" />
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="132" style="align-content: center">
            <template #default="scope">
              <el-button @click="placeOrder(scope)" type="text" size="small">下单</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <el-text type="danger" style="white-space: pre-wrap">{{ tagDataStr }}</el-text>
    <div style="text-align: center">
      <el-button type="primary" size="large">提交</el-button>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { listBillFare, billCategory } from "@/api/sysManager/shopManage/billFareIndex";
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      filterText: "",
      tagDataStr: "",
      tagData: [],
      billCategoryData: [],
      tableData: [],
      queryFrom: {
        pageNo: 1,
        pageSize: 10,
        shopsId: "",
        categoryType: "",
        foodName: ""
      },
      total: 1,
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  mounted() {
    this.listBillFare();
    this.billCategory();
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    placeOrder(scope) {
      this.tagData.push(scope.row.foodName + " (" + scope.row.price + "元)" + "\n");
      this.tagDataStr = "订单列表：\n" + this.tagData;
    },
    getTree(data) {
      this.queryFrom.categoryType = null;
      if (data.children === null) {
        this.queryFrom.categoryType = data.label;
      }
      this.queryFrom.shopsId = data.shopsId;
      this.listByPage();
    },
    // 获取分页查询数据
    async listBillFare() {
      let res = await listBillFare(this.queryFrom);
      if (res.code === 200) {
        this.tableData = res.data;
        if (res.total === 0) {
          this.$message.warning("当前条件未查询到数据");
        }
      }
    },
    async billCategory(data) {
      let res = await billCategory(data);
      if (res.code === 200) {
        this.billCategoryData = res.data;
      }
    },
    tableRowClassName({ rowIndex }) {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      let index = rowIndex % 2;
      if (index === 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    }
  }
};
</script>

<style>
.el-table .warning-row {
  background: #ffffff;
  /*background: #73ff00;*/
}

.el-table .success-row {
  background: #f0f9eb;
  /*background: #b1a59b;*/
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: left;
  line-height: 50px;
}
</style>
